<template>
  <view class="parkingInfoBaseForm">
    <view class="tn-shadow tn-p-sm tn-mb tn-mt">
          <tn-form ref="formRef" :model="formData" label-position="top">
          <tn-form-item   prop="carPlate">
            <template #label>
              <tn-title   title="月租车不在有效期内入场是否干预" mode="vLine" sub-title="Recharge" assist-color="tn-blue" />
            </template>
            <view @click="openPicker('noRenewal',Dict.dict.COMMON_YES_NO)">
              <tn-input style="pointer-events:none"
                :model-value="Dict.label.COMMON_YES_NO[formData.noRenewal]" placeholder="默认:是" />
            </view>
            <view class="tn-grey_text"></view>
          </tn-form-item>
            <tn-form-item   prop="isPass">
            <template #label>
              <tn-title   title="月租车过期后未找到入场记录是否自动开闸" mode="vLine" sub-title="isPass" assist-color="tn-blue" />
            </template>
            <tn-radio-group v-model="formData.isPass" >
              <tn-radio v-for="(item,index) in Dict.dict.COMMON_YES_NO" :label="item.value"  >{{item.label}}</tn-radio> 
          
            </tn-radio-group>
            <view class="tn-grey_text">默认:是</view>
          </tn-form-item>

          <tn-form-item   prop="carPlate">
            <template #label>
              <tn-title   title="月租车过期后延期收费天数" mode="vLine" sub-title="Recharge" assist-color="tn-blue" />
            </template>
            <tn-input v-model="formData.carPlate"  placeholder="" :border="customStyleBorder"   :custom-style="customStyleInput"></tn-input>
            <view class="tn-grey_text">默认：0天</view>
          </tn-form-item>

      <tn-form-item   prop="isPass">
        <template #label>
          <tn-title   title="月租车无权限是是否按临停收费" mode="vLine" sub-title="isPass" assist-color="tn-blue" />
        </template>
        <tn-radio-group v-model="formData.isPass" >
          <tn-radio v-for="(item,index) in Dict.dict.COMMON_YES_NO" :label="item.value"  >{{item.label}}</tn-radio> 
      
        </tn-radio-group>
        <view class="tn-grey_text">默认:是</view>
      </tn-form-item>
      
          <tn-form-item   prop="carPlate">
            <template #label>
              <tn-title   title="月租车出入口处开始提示剩余天数" mode="vLine" sub-title="Recharge" assist-color="tn-blue" />
            </template>
            <tn-input v-model="formData.carPlate"  placeholder="默认15分钟" :border="customStyleBorder"  :custom-style="customStyleInput"></tn-input>
            <view class="tn-grey_text"></view>
          </tn-form-item>
   <tn-form-item   prop="carPlate">
            <template #label>
              <tn-title   title="月租车过期后是否按当前日期续费" mode="vLine" sub-title="Recharge" assist-color="tn-blue" />
            </template>
            <tn-input v-model="formData.carPlate"  placeholder="默认15分钟" :border="customStyleBorder"  :custom-style="customStyleInput"></tn-input>
            <view class="tn-grey_text"></view>
          </tn-form-item>

          </tn-form>
       
               <view class="tn-tabbar-height"></view>
        </view>


             <!-- 悬浮确认框 -->
             <view  class="floating-button tn-flex justify-center" ><tn-button @click="confirmEdit" width="80%" size="xl" text-color="tn-white"
          bg-color="tn-gradient-bg__cool-8">提 交</tn-button></view>
  <!-- 选择器 -->
  <tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />


  </view>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import cfsheep from "@/cfsheep";
  
  /** 页面初始化配置  */
  
  /* 1.字典数据 使用方式：【Dict.dict.字典名称】   为字典数据  【Dict.lable.字典名称[值]】 为获取字典文本 */
  const Dict = cfsheep.$store("dict");
  
  /* 2.表单配置处理-背景样式处理 */
  const customStyleInput = ref({ backgroundColor: "#ededed75" });
  const customStyleBorder = ref(false);
  /* 3.字典选择器使用  <tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />*/
  
  // 字典处理-选择器key
  const pickerKey = ref("");
  // 字典处理-选择器数据
  const pickerData = ref([]);
  
  // 字典处理-控制选择器的可见性
  const openPickerVisible = ref(false);
  
  // 字典处理-打开选择器
  const openPicker = (type:string,dict:any) => {
      pickerKey.value = type;
      pickerData.value = dict;
      openPickerVisible.value = true; // 显示选择器
  };
  
  // 字典处理-关闭选择器
  const closePicker = () => {
      openPickerVisible.value = false; // 隐藏选择器
  };
  
  // 字典处理-确认选择器的选择
  const confirmPicker = (value) => {
      formData.value[pickerKey.value] = value;
      closePicker(); // 关闭选择器
  };
  
  
   // 表单数据模型
  	const formData = ref({
  		isPass: 1,
  		carPlate: "", // 修改为车场编号
  		noRenewal: "", // 修改为通讯码
  		responsiblePerson: "", // 修改为负责人
  		managementPhone: "", // 修改为管理处电话
  		
  		systemType: "", // 修改为系统类型
  		totalParkingSpaces: "", // 修改为总停车位
  		longitude: "", // 修改为经度
  		latitude: "", // 修改为纬度
  		province: "",
  		city: "",
  		district: "",
  		address: "",
  		remarks: "", // 修改为备注
  	});
  	const confirmEdit=() => {
    };
   onLoad(() => { 
  	});
  </script>

<style scoped>

:deep(.tn-radio-group){ 
  justify-content: space-around;
}

.floating-button {
	position: fixed;
	/* 固定定位 */
	bottom: 20rpx;
	/* 距离底部20rpx */
	left: 0;
	/* 左对齐 */
	right: 0;
	/* 右对齐 */
	margin: 0 auto;
	/* 居中 */
}
</style>